<div class="main-section">
    <h1 class="main-section__title">Switch</h1>

    <p class="main-section__intro">
        <code>lx-switch</code> is a directive that create an input checkbox element.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/switch/includes/basic.html" lx-js-path="/js/switch/demo/demo-switch_controller.js">
        The switch label can be specified as transcluded element.<br />
        To specify a helper message, two directives need to be transcluded.<br />
        <code>lx-switch-label</code> for the label and <code>lx-switch-help</code> for the helper message.
    </lx-component>

    <lx-component lx-title="Disabled state" lx-path="/includes/modules/switch/includes/state.html" lx-js-path="/js/switch/demo/demo-switch_controller.js">
        Disabled style will automaticly be applied when using <code>ng-disabled</code> or <code>disabled</code> attribute.
    </lx-component>

    <lx-component lx-title="Main colors" lx-path="/includes/modules/switch/includes/color.html" lx-js-path="/js/switch/demo/demo-switch_controller.js">
        Main colors defined in <code>dist/scss/core/settings/defaults.scss</code> can be used to create colored switches.
    </lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-color</td>
                    <td><code>string</code></td>
                    <td><code>accent</code></td>
                    <td>Define the switch color. Options: colors defined in colors and sizes section in <code>dist/scss/core/settings/defaults.scss</code></td>
                </tr>
                <tr>
                    <td>name</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Property name of the form under which the control is published.</td>
                </tr>
                <tr>
                    <td>ng-change</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Angular expression to be executed when input changes due to user interaction with the input element.</td>
                </tr>
                <tr>
                    <td>ng-disabled</td>
                    <td><code>expression</code></td>
                    <td></td>
                    <td>If the expression is truthy, then the disabled attribute will be set on the element.</td>
                </tr>
                <tr>
                    <td>ng-false-value</td>
                    <td><code>expression</code></td>
                    <td></td>
                    <td>The value to which the expression should be set when not selected.</td>
                </tr>
                <tr>
                    <td>ng-model*</td>
                    <td><code>string</code></td>
                    <td></td>
                    <td>Assignable angular expression to data-bind to.</td>
                </tr>
                <tr>
                    <td>ng-true-value</td>
                    <td><code>expression</code></td>
                    <td></td>
                    <td>The value to which the expression should be set when selected.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>
</div>